import pos, { PosAppPrintTemplate, PosGetIn } from 'api/pos';
import { RadiusButton, Toast } from 'components';
import React, { useEffect, useState } from 'react';
import { Image, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { NavigationStackScreenComponent } from 'react-navigation-stack';
import { goBack } from 'services/navigation';
import { commonStyle } from 'styles';

import assets from './assets';
import { changeStyle } from './styles';
import { operate } from 'services/authorization';
import VoucherRemarks from './fund/components/voucher-remarks/VoucherRemarks';

const ChangeTemplateScreen: NavigationStackScreenComponent<{ projectId: number, generateBill: (templateId: any) => void }> = props => {
	const [templateList, setTemplateList] = useState<PosAppPrintTemplate[]>([])
	const [currTemplate, setCurrTemplate] = useState<PosAppPrintTemplate>({})
	const [remarks, setRemarks] = useState('');
	const [showChoose, setShowChoose] = useState(false);


	useEffect(() => {
		let projectId = props.navigation.getParam('projectId')
		if (projectId) {
			pos.posApp.getPosAppPrintTemplate({ projectId }).then(res => {
				res && setTemplateList(res)
				res.length > 0 && setCurrTemplate(res[0])
			})
		}
		props.navigation.setParams({
			onChoose: () => {
				setShowChoose(true)
			}
		});
	}, [])
	const renderItem = (item: PosAppPrintTemplate) => {
		return (
			<TouchableOpacity style={changeStyle.itemContainer} key={item.id} onPress={() => {
				operate()
				setCurrTemplate(item)
			}}>
				<View style={{ ...changeStyle.rowContainer }}>

					<Image
						resizeMode="cover"
						style={changeStyle.checkImage}
						source={item.id === currTemplate.id ? assets.images.icon_check : assets.images.icon_uncheck}
					/>

					<View style={{ ...changeStyle.nameContainer }}>
						<Text style={changeStyle.name}>{item.templateName}</Text>
						<Text style={changeStyle.remark}>({item.sealName})</Text></View>


				</View>
				<View style={{ ...changeStyle.rowContainer, ...changeStyle.rowMargin }}><Text style={changeStyle.remark}>{``}</Text></View>

			</TouchableOpacity>
		)
	}

	return (
		<View style={[commonStyle.containerColumn, changeStyle.container]}>
			<ScrollView keyboardShouldPersistTaps="always">
				<View style={[commonStyle.containerColumn, changeStyle.listContainer]}>
					{templateList.map(renderItem)}
				</View>
			</ScrollView>
			<RadiusButton style={changeStyle.comfirmBtn} onPress={() => {
				if (!currTemplate) {
					Toast.show('请选择模板！')
					return
				}
				goBack()
				props.navigation.getParam('generateBill') && props.navigation.getParam('generateBill')(currTemplate.id, remarks)

			}}>
				<Text style={changeStyle.btnText}>生成收据</Text>
			</RadiusButton>
			<VoucherRemarks
				style={showChoose ? {} : { height: 0 }}
				remarks={remarks}
				onConfirm={(data) => { setRemarks(data); setShowChoose(false) }} onCancel={() => { setShowChoose(false) }} />
		</View>
	)
}

ChangeTemplateScreen.navigationOptions = props => {
	return {
		title: '数据模板选择',
		headerRight: (
			<TouchableOpacity
				style={commonStyle.headerRight}
				onPress={() => {
					let onChoose = props.navigation.getParam('onChoose');
					onChoose && onChoose();
				}}>
				<Text style={commonStyle.headerFont}>填写备注</Text>
			</TouchableOpacity>
		),
	}
}

export default ChangeTemplateScreen
